<template>
  <div>
    <van-nav-bar title="评论成功" />
    <div class="chinical_box">
      <p class="true_img"></p>
      <p class="chinical_text">评论成功，感谢您!</p>
    </div>
    <div class="chinical_title">
      <p>如果您的问题得到解决？发个礼物鼓励一下吧~</p>
    </div>
    <div>
      <div class="chinical_box1">
        <img src="../../image/gl2.png" alt="" />
        <div class="chinical_p">
          <p>花束</p>
          <p class="chinical_price">{{ flowers }}H币</p>
        </div>
        <button class="chinical_btn">立刻赠送</button>
      </div>

      <div class="chinical_box1">
        <img src="../../image/gl1.png" alt="" />
        <div class="chinical_p">
          <p>证书</p>
          <p class="chinical_price">{{ certificate }}H币</p>
        </div>
        <button class="chinical_btn">立刻赠送</button>
      </div>

      <div class="chinical_box1">
        <img src="../../image/gl3.png" alt="" />
        <div class="chinical_p">
          <p>奖杯</p>
          <p class="chinical_price">{{ trophy }}H币</p>
        </div>
        <button class="chinical_btn">立刻赠送</button>
      </div>
      <button class="chinical_btns" @click="back">返回</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
// 鲜花
const flowers = ref(20)
// 证书
const certificate = ref(50)
// 奖杯
const trophy = ref(100)
// 数据
const money=[
  {
    flowers:flowers.value,
    certificate:certificate.value,
    trophy:trophy.value
  }
]
const back = () => {
  router.push('/yswz')

}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.chinical_box {
  width: 100%;
  height: 180px;
  background-image: url('../../image/zfok.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.true_img {
  width: 60px;
  height: 60px;
  background-image: url('../../image/zfok1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  left: 42%;
  top: 22%;
}

.chinical_text {
  color: #fff;
  position: absolute;
  left: 32%;
  font-size: 16px;
  top: 26%;
}

.chinical_title {
  width: 100%;
  height: 40px;
  /* background: red; */
  line-height: 40px;
  font-size: 13px;
  text-align: center;
}

.chinical_btn {
  width: 100px;
  height: 30px;
  color: #fff;
  border-radius: 5px;
  background: #007bff;
  border: solid 1px #fff;
  margin-top: 60px;
}
.chinical_price {
  margin: 10px 0;
  color: red;
}
.chinical_box1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border: 1px solid #eee;
  padding: 5px;
}
.chinical_box1 img {
  width: 100px;
}
.chinical_p {
  margin-top: 25px;
}
.chinical_btns {
  width: 90%;
  height: 35px;
  color: #fff;
  margin-left: 5%;
  font-size: 15px;
  background: #007bff;
  border: 1px solid #eee;
  margin-top: 5%;
}
</style>
